import React from 'react'
import { Outlet, NavLink } from 'react-router-dom';

export default function Home() {
  return (
    <div className="col-xs-6">
      <div className="panel">
        <div className="panel-body">
          <h3>我是 Home 的内容</h3>
          <hr />
          <div>
            <ul className="nav nav-tabs" style={{borderBottom: 'none'}}>
              <li>
                <NavLink to="/home/news" className="list-group-item ">News</NavLink>
              </li>
              <li>
                <NavLink to="/home/message" className={(data) => {
                  if(data.isActive){
                    return 'list-group-item active';
                  }else{
                    return 'list-group-item';
                  }
                }}>Message</NavLink>

              </li>
            </ul>
            <hr />
            <Outlet />
          </div>
        </div>
      </div>
    </div>
  )
}
